<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box">
            <div class="card-main">
                <el-form
                    ref="formRef"
                    :model="formData"
                    :rules="rules"
                    label-width="120px"
                    :disabled="pageType == 'look'">
                    <div class="item">
                        <el-form-item v-if="pageType" label="商机编号">
                            <div class="business_code">{{ businessCode }}</div>
                        </el-form-item>
                        <el-form-item label="商机名称" prop="name">
                            <el-input
                                v-model="formData.name"
                                placeholder="请输入商机名称"
                                maxlength="20"
                                show-word-limit />
                        </el-form-item>
                    </div>
                    <el-form-item label="商机流程" prop="workflow_id">
                        <el-select v-model="formData.workflow_id" placeholder="请选择商机流程">
                            <el-option
                                v-for="item in workflowSelect"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商机金额" prop="amount">
                        <el-input-number
                            v-model="formData.amount"
                            :controls="false"
                            :precision="2"
                            :step="0.1"
                            :min="0"
                            placeholder="请输入商机金额" />
                        元
                    </el-form-item>
                    <el-form-item label="预计赢单时间" prop="predict_time">
                        <el-date-picker
                            v-model="formData.predict_time"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetime"
                            placeholder="选择日期" />
                    </el-form-item>
                    <el-form-item label="归属员工" prop="belong_uid">
                        <div v-if="belongUidList.length" class="form-staffs">
                            <div class="staffs">
                                <el-tag
                                    v-for="item in belongUidList"
                                    :key="item.name"
                                    class="staffs_item"
                                    :closable="pageType != 'look'"
                                    :type="item.id"
                                    @close="handleClose(item, 1)">
                                    {{ item.name }}
                                </el-tag>
                            </div>
                        </div>
                        <el-button @click="openDepart('BELONG_UID')">选择员工</el-button>
                    </el-form-item>
                    <el-form-item label="购买客户" prop="cust_id">
                        <div v-if="formData.cust_id" class="cust_box">
                            <img class="cust_img" :src="customerInfo.avatar" alt="" />
                            {{ customerInfo.name }}
                        </div>
                        <el-button @click="openCustomer">{{ formData.cust_id ? '重新选择' : '选择客户' }}</el-button>
                    </el-form-item>
                    <el-form-item v-if="contactList.length" label="选择联系人" prop="contact_id">
                        <el-select v-model="formData.contact_id" placeholder="请选择联系人">
                            <el-option v-for="item in contactList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="关联产品">
                        <el-button @click="openZWProduct">添加产品</el-button>
                    </el-form-item>
                    <!-- 产品列表 -->
                    <el-form-item v-if="productInfo.length">
                        <div class="total_box">
                            <el-icon class="icon"><Warning /></el-icon>
                            <div class="text"><span style="color: #909399">售卖总价：</span> ￥{{ totalPrice }}</div>
                            <div class="text"><span style="color: #909399">优惠金额</span>￥{{ discountPrice }}</div>
                            <div class="text">
                                <span style="color: #909399">实付总金额：</span
                                ><span class="amount">￥{{ actualPrice }}</span>
                            </div>
                        </div>
                        <div class="table_box">
                            <el-table
                                :data="productInfo"
                                style="width: 100%"
                                class="productTable"
                                :header-cell-style="{ background: '#fafafa', color: '#909399' }"
                                stripe>
                                <el-table-column prop="date" label="产品信息" min-width="220">
                                    <template #default="scope">
                                        <div class="product_box">
                                            <el-image class="left" :src="scope.row.cover" fit="cover">
                                                <template #error>
                                                    <el-icon><icon-picture /></el-icon>
                                                </template>
                                            </el-image>
                                            <div class="right">
                                                <div class="right_t">{{ scope.row.product_name }}</div>
                                                <div class="right_b">
                                                    规格：{{ formData.product_list[scope.$index].name }}
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="product_no" label="产品编号" width="150" />
                                <el-table-column prop="sale_price" label="产品售价" width="100">
                                    <template #default="scope"> ￥{{ scope.row.sale_price }} </template>
                                </el-table-column>
                                <el-table-column prop="stock_qty" label="库存" width="100" />
                                <el-table-column prop="buy_qty" label="购买数量" width="150">
                                    <template #default="scope">
                                        <el-input-number
                                            v-model="formData.product_list[scope.$index].buy_qty"
                                            :min="1"
                                            :max="scope.row.stock_qty"
                                            :controls="false"
                                            :precision="0"
                                            size="small"
                                            placeholder="请输入购买数量"
                                            @blur="onNumber(scope.$index)" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="discount" label="折扣力度" width="150">
                                    <template #default="scope">
                                        <div class="discount">
                                            <el-input-number
                                                v-model="formData.product_list[scope.$index].discount"
                                                :min="0"
                                                :max="100"
                                                :controls="false"
                                                :precision="0"
                                                size="small"
                                                placeholder="0~100"
                                                @blur="onNumber(scope.$index)" />
                                            <span style="margin-left: 4px">%</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="buy_price" label="实付价格" width="150">
                                    <template #default="scope">
                                        <div class="discount">
                                            <el-input-number
                                                v-model="formData.product_list[scope.$index].buy_price"
                                                :min="0"
                                                :controls="false"
                                                :precision="2"
                                                size="small"
                                                placeholder="请输入实付价格" />
                                            <span style="margin-left: 4px">元</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" label="操作" width="100" fixed="right">
                                    <template #default="scope">
                                        <el-button class="delete_btn" size="small" @click="onDelete(scope.$index)"
                                            >删除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form-item>
                    <el-form-item label="协助员工">
                        <div v-if="assistIdsList.length" class="form-staffs">
                            <div class="staffs">
                                <el-tag
                                    v-for="item in assistIdsList"
                                    :key="item.name"
                                    class="staffs_item"
                                    :closable="pageType != 'look'"
                                    :type="item.id"
                                    @close="handleClose(item, 2)">
                                    {{ item.name }}
                                </el-tag>
                            </div>
                        </div>
                        <div class="discount">
                            <el-button @click="openDepart('ASSIST_IDS')">选择员工</el-button>
                            <span class="num">最多只能添加10位</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="关联群聊">
                        <div v-if="groupOptions.length" class="wrapper">
                            <div v-for="(item, index) in groupOptions" :key="item.group_id" class="groupchat">
                                <el-image
                                    class="groupchat_left"
                                    :preview-src-list="[item.avatar]"
                                    :preview-teleported="true"
                                    :src="item.avatar"
                                    fit="cover">
                                    <template #error>
                                        <el-icon><icon-picture /></el-icon>
                                    </template>
                                </el-image>
                                <div class="groupchat_right">
                                    <el-tooltip
                                        v-if="item.name.length > 12"
                                        effect="dark"
                                        :content="item.name"
                                        placement="top-start">
                                        <div class="groupchat_right_t">{{ item.name }}</div>
                                    </el-tooltip>
                                    <div v-else class="groupchat_right_t">{{ item.name }}</div>
                                    <div class="groupchat_right_b">群主：{{ item.managerName }}</div>
                                </div>
                                <div v-if="pageType != 'look'" class="icon_box" @click="onGroupchatDel(index)">
                                    <el-icon><CircleCloseFilled /></el-icon>
                                </div>
                            </div>
                        </div>
                        <div class="group_box">
                            <el-button @click="showGroupBox">选择企微群聊</el-button>
                            <span>最多只能添加 10 个群聊</span>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <ZWDepart ref="DepartRef" @submit="getDepart" />
            <ZWCustomer ref="ZWCustomerRef" @submit="getCustomer" />
            <ZWProduct ref="ZWProductRef" @submit="getProductr" />
            <GroupChart ref="GroupChartRef" @submit="getGroupFun" />
        </el-scrollbar>
        <div class="footer_box">
            <el-button @click="router.back()">取消</el-button>
            <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import ZWDepart from '@/components/ZWDepart.vue';
import ZWCustomer from '@/components/ZWCustomer.vue';
import ZWProduct from '@/components/ZWProduct.vue';
import GroupChart from '@/components/chart/GroupChart.vue';
import { getCustomerDetail, corpContacts } from '@/api/customerCenter';
import { businessCreate, businessEdit, businessInfo } from '@/api/salesleads/salesmanagement/business';
import { getWorkflowSelect } from '@/api/salesleads/salesmanagement/business';
import { mul, div, sub, add } from '@/utils/math';
import { getSetionId, IsNotEmpty } from '@/utils/utils';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Picture as IconPicture } from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();
const pageType = route.query.type;
const formRef = ref<any>(null);
const ZWProductRef = ref<any>(); // 部门弹框类型

const formData: any = ref({
    cust_id: '', //主客户
    contact_id: '', //联系人
    workflow_id: null, //流程ID
    name: '', //商机名称
    amount: void 0, //商机金额
    predict_time: '', //预计赢单时间
    belong_dept_id: '',
    belong_uid: '', //归属员工
    assist_ids: [], //协助员工
    groupchat_ids: [], //关联群聊
    product_list: [] //关联产品
});
const amountValidator = (rule: any, value: any, callback: any) => {
    if (value) {
        callback();
    } else {
        callback(new Error('请输入商机金额'));
    }
};

const rules = reactive({
    name: [{ required: true, message: '请输入商机名称', trigger: 'blur' }],
    workflow_id: [{ required: true, message: '请选择商机流程', trigger: 'change' }],
    amount: [
        { required: true, message: '请输入商机金额', trigger: 'blur' },
        { validator: amountValidator, trigger: 'blur' }
    ],
    predict_time: [{ required: true, message: '请选择预计赢单时间', trigger: 'blur' }],
    belong_uid: [{ required: true, message: '请选择归属员工', trigger: 'change' }],
    assist_ids: [{ required: true, message: '请选择协助员工', trigger: 'change' }],
    cust_id: [{ required: true, message: '请选择购买客户', trigger: 'change' }],
    contact_id: [{ required: true, message: '请选择联系人', trigger: 'change' }]
});

// 选择员工
const DepartRef = ref<any>(); // 部门弹框类型
const belongUidList: any = ref([]); // 归属
const assistIdsList: any = ref([]); // 协助
const openType = ref('');
const openDepart = (type: string) => {
    switch (type) {
        case 'BELONG_UID':
            DepartRef.value.multiple = false;
            DepartRef.value.disabledSelected = formData.value.assist_ids;
            DepartRef.value.selectedMember = [...belongUidList.value];
            break;
        case 'ASSIST_IDS':
            DepartRef.value.multiple = true;
            DepartRef.value.disabledSelected = [formData.value.belong_uid];
            DepartRef.value.selectedMember = [...assistIdsList.value];
            break;
    }
    openType.value = type;
    DepartRef.value.departVisble = true;
};
// 获取部门成员
const getDepart = (res: any) => {
    if (res.length) {
        switch (openType.value) {
            case 'BELONG_UID':
                belongUidList.value = res;
                formData.value.belong_dept_id = res[0].work_department_id;
                formData.value.belong_uid = getSetionId('id', belongUidList.value)[0];
                break;
            case 'ASSIST_IDS':
                assistIdsList.value = res.filter((item: any, index: number) => index < 10);
                formData.value.assist_ids = getSetionId('id', assistIdsList.value);
                break;
        }
    }
};
// 员工移除
const handleClose = (tag: any, val: any) => {
    if (val == 1) {
        belongUidList.value = belongUidList.value.filter((item: any) => item.id !== tag.id);
        belongUidList.value.forEach((item: any) => {
            if (item.id == formData.value.belong_uid) {
                formData.value.belong_uid = '';
                formData.value.belong_dept_id = '';
            }
        });
    } else {
        assistIdsList.value = assistIdsList.value.filter((item: any) => item.id !== tag.id);
        formData.value.assist_ids = getSetionId('id', assistIdsList.value);
    }
};
// 选择客户
const contactList = ref<any>([]); // 企业客户联系人list
const ZWCustomerRef = ref<any>(null);
const customerInfo: any = ref({
    id: '',
    name: '',
    avatar: ''
});
const openCustomer = () => {
    ZWCustomerRef.value.appDialog.row = customerInfo.value;
    ZWCustomerRef.value.appDialog.visible = true;
};
// 获取客户信息
const getCustomer = (v: any) => {
    formData.value.cust_id = v.id;
    if (v.type == 1) {
        customerInfo.value = {
            id: v.id,
            name: v.cust_baseinfo.name,
            avatar: v.cust_baseinfo.avatar
        };
    } else {
        customerInfo.value = {
            id: v.id,
            name: v.crop_name,
            avatar: v.avatar
        };
        contactList.value = v.contact || [];
        formData.value.contact_id = contactList.value[0]?.id;
    }
};

// 选择群聊
const GroupChartRef = ref<any>();
const groupOptions = ref<any>([]);
const showGroupBox = () => {
    GroupChartRef.value.appDialog.visible = true;
    // GroupChartRef.value.single = true
};
const getGroupFun = (v: any) => {
    v.forEach((item: any) => {
        if (groupOptions.value.length < 10) {
            if (!formData.value.groupchat_ids.includes(item.group_id)) {
                groupOptions.value.push({
                    id: item.group_id,
                    name: item.name,
                    avatar: item.avatar,
                    managerName: item.manager.name
                });
                formData.value.groupchat_ids.push(item.group_id);
            }
        }
    });
    if (groupOptions.value.length + v.length > 10) {
        ElMessage.warning('最多可选10个群聊');
    }
};
const onGroupchatDel = (index: any) => {
    groupOptions.value.splice(index, 1);
    formData.value.groupchat_ids.splice(index, 1);
};
// 选择产品
const productInfo = ref<any>([]);
const openZWProduct = () => {
    ZWProductRef.value.visible = true;
};
const getProductr = (v: any) => {
    productInfo.value = [];
    formData.value.product_list = [];
    v.forEach((item: any) => {
        // 无规格产品
        if (item.spec_type == 1) {
            // && formData.value.product_list.every((it: any) => it.product_id != item.product_id)
            const index = formData.value.product_list.findIndex((it: any) => it.product_id == item.product_id);
            if (index == -1) {
                formData.value.product_list.push({
                    product_id: item.product_id,
                    stock_id: '',
                    name: '',
                    buy_qty: 1, //产品数量
                    discount: 1000, //产品折扣
                    buy_price: item.sale_price //实付金额
                });
                productInfo.value.push({
                    product_name: item.product_name,
                    product_no: item.product_no,
                    cover: item.cover,
                    stock_qty: item.stock_qty,
                    sale_price: item.sale_price
                });
            } else {
                formData.value.product_list[index].buy_qty++;
                if (formData.value.product_list[index].buy_qty <= item.stock_qty) {
                    formData.value.product_list[index].buy_price = mul(
                        formData.value.product_list[index].buy_qty,
                        item.sale_price
                    );
                }
            }
            // 有规格产品
        } else {
            if (item.spec_type == 2) {
                // && formData.value.product_list.every((it: any) => it.stock_id != item.specificate_list[item.selected].id)
                const index = formData.value.product_list.findIndex(
                    (it: any) => it.stock_id == item.specificate_list[item.selected].id
                );
                if (index == -1) {
                    formData.value.product_list.push({
                        product_id: item.product_id,
                        stock_id: item.specificate_list[item.selected].id,
                        name: item.specificate_list[item.selected].options_vals,
                        buy_qty: 1, //产品数量
                        discount: 100, //产品折扣
                        buy_price: item.specificate_list[item.selected].sale_price //实付金额
                    });
                    productInfo.value.push({
                        product_name: item.product_name,
                        product_no: item.product_no,
                        cover: item.cover,
                        stock_qty: item.specificate_list[item.selected].stock_qty,
                        sale_price: item.specificate_list[item.selected].sale_price
                    });
                } else {
                    formData.value.product_list[index].buy_qty++;
                    if (formData.value.product_list[index].buy_qty <= item.stock_qty) {
                        formData.value.product_list[index].buy_price = mul(
                            formData.value.product_list[index].buy_qty,
                            item.specificate_list[item.selected].sale_price
                        );
                    }
                }
            }
        }
    });
};
const onNumber = (index: number) => {
    // 价格*折扣
    const sum = mul(productInfo.value[index].sale_price, div(formData.value.product_list[index].discount, 100));
    // 折扣单价 * 数量
    const num = mul(sum, formData.value.product_list[index].buy_qty);
    formData.value.product_list[index].buy_price = num;
};
// 售卖总价
const totalPrice = computed(() => {
    let total: any = 0;
    productInfo.value.forEach((item: any, index: number) => {
        total = add(total, mul(item.sale_price, formData.value.product_list[index].buy_qty));
    });
    return total;
});
// 优惠金额
const discountPrice = computed(() => {
    let total: any = 0;
    productInfo.value.forEach((item: any, index: number) => {
        total = add(
            total,
            mul(
                mul(item.sale_price, formData.value.product_list[index].buy_qty),
                div(sub(100, formData.value.product_list[index].discount), 100)
            )
        );
    });
    return total;
});
// 实付总金额
const actualPrice = computed(() => {
    let total: any = 0;
    formData.value.product_list.forEach((item: any) => {
        total = add(total, item.buy_price);
    });
    return total;
});
const onDelete = (index: number) => {
    productInfo.value.splice(index, 1);
    formData.value.product_list.splice(index, 1);
};
// 商机流程
const workflowSelect: any = ref([]);
const onWorkflow = () => {
    getWorkflowSelect().then((res: any) => {
        workflowSelect.value = res;
        if (res.length) {
            formData.value.workflow_id = res[0].id;
        }
    });
};
onWorkflow();
// 客户列表跳转至商机
const onGetCustomerInfo = () => {
    const params = { cust_id: route.query.customer };
    getCustomerDetail(params).then((res: any) => {
        formData.value.cust_id = route.query.customer;
        customerInfo.value = {
            id: route.query.customer,
            name: res.base_info.name,
            avatar: res.base_info.avatar
        };
        belongUidList.value = res.assign_employees ? [{ type: 'user', ...res.assign_employees }] : [];
        formData.value.belong_uid = res.assign_employees?.id;
    });
    corpContacts(params).then((res: any) => {
        contactList.value = res || [];
        formData.value.contact_id = res[0]?.id;
    });
};
const onSubmit = async (formEl: any) => {
    if (!formEl) return;
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            if (
                formData.value.product_list.every(
                    (item: any) => item.buy_qty > 0 && item.discount > 0 && item.buy_price > 0
                )
            ) {
                pageType
                    ? businessEdit(formData.value).then((res: any) => {
                          router.back();
                          ElMessage.success('编辑商机成功');
                      })
                    : businessCreate(formData.value).then((res: any) => {
                          router.back();
                          ElMessage.success('新建商机成功');
                      });
            } else {
                ElMessage.warning('请设置产品参数');
            }
        } else {
            ElMessage.warning(Object.values(fields)[0][0].message);
        }
    });
};
const businessCode = ref('');
const getLook = () => {
    businessInfo({ business_id: route.query.id }).then((res: any) => {
        businessCode.value = res.business_code;
        formData.value = {
            business_id: res.business_id,
            cust_id: res.cust_id, //主客户
            workflow_id: res.workflow_id, //流程ID
            name: res.name, //商机名称
            amount: res.amount, //商机金额
            predict_time: res.predict_time, //预计赢单时间
            belong_dept_id: res.belong_dept_id,
            belong_uid: res.belong_info.id, //归属员工
            assist_ids: getSetionId('id', res.assist_info), //协助员工
            groupchat_ids: [], //关联群聊
            product_list: [] //关联产品
        };
        // 产品
        res.product_list.forEach((item: any) => {
            formData.value.product_list.push({
                product_id: item.product_id,
                stock_id: item.stock_id,
                name: item.stock_name,
                buy_qty: item.buy_qty, //产品数量
                discount: item.discount, //产品折扣
                buy_price: item.buy_price
            });
            productInfo.value.push({
                product_name: item.product_name,
                product_no: item.product_no,
                cover: item.cover,
                stock_qty: item.stock_qty,
                sale_price: item.sale_price
            });
        });
        // 客户
        customerInfo.value.id = res.cust_info.id;
        customerInfo.value.avatar = res.cust_info.avatar;
        if (res.cust_info.type == 1) {
            // 个人客户
            customerInfo.value.name = res.cust_info.name;
        } else {
            // 企业客户
            contactList.value = res.cust_info.corp_contacts;
            formData.value.contact_id = res.cust_info.corp_contact_info.id;
            customerInfo.value.name =
                res.cust_info.crop_info.short_name || res.cust_info.crop_info.corp_name || res.cust_info.name;
            customerInfo.value.avatar = res.cust_info.avatar;
        }
        // 群聊
        res.groupchat.forEach((item: any) => {
            groupOptions.value.push({
                id: item.id,
                avatar: item.avatar,
                name: item.name,
                managerName: item.owner_username
            });
            formData.value.groupchat_ids.push(item.id);
        });
        belongUidList.value = [{ ...res.belong_info, type: 'user', check: true }];
        assistIdsList.value = res.assist_info.map((item: any) => ({ ...item, type: 'user', check: true }));
    });
};
onMounted(() => {
    pageType && getLook();
    route.query.customer && onGetCustomerInfo();
});
</script>
<style lang="scss" scoped>
.card-main {
    padding: 24px;
}

:deep(.el-input-number .el-input__inner) {
    text-align: left;
}

.el_image {
    width: 48px;
    height: 48px;
    margin-right: 10px;
}

// 员工选择
.form-staffs {
    display: flex;
    margin-bottom: 10px;

    .title {
        margin-right: 12px;
    }

    .staffs {
        &_item {
            height: 22px;
            line-height: 22px;
            margin-right: 6px;

            // padding: 0;
            color: #35383a;
            border: 1px solid #fffaf9;
            border-radius: 1px;
            background: #fffaf9;
        }

        :deep .el-tag .el-icon {
            width: 12px;
            height: 12px;
            color: #fff;
            background: #d9d9d9;
        }

        :deep .el-tag .el-icon svg {
            margin: 0;
        }

        :deep .el-tag .el-tag__close:hover {
            background: #d9d9d9;
        }

        :deep span.el-tag.el-tag--light.staffs_item::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 11px;
            background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
            margin-right: 10px;
        }
    }
}

// 客户信息
.cust_box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .cust_img {
        width: 48px;
        height: 48px;
        border-radius: 3px;
        display: grid;
        place-content: center;
        font-size: 48px;
        margin-right: 8px;
    }
}

.item {
    width: 40%;
}

.business_code {
    line-height: 40px;
}

.total_box {
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 16px;
    font-size: 14px;
    background: #fffaf9;
    border: 1px solid #ffc69e;
    color: #33302d;

    .icon {
        width: 30px;
        font-size: 16px;
        color: #ff6b00;
    }

    .text {
        margin-right: 10px;
    }

    .amount {
        color: #ff6b00;
    }
}

.table_box {
    .product_box {
        display: grid;
        grid-template-columns: 48px 1fr;
        grid-gap: 7px;

        .left {
            width: 48px;
            height: 48px;
            font-size: 48px;
            display: grid;
            place-content: center;
        }

        .right {
            .right_t {
                height: 24px;
                font-size: 14px;
            }

            .right_b {
                height: 24px;
                font-size: 12px;
                color: #969696;
            }
        }
    }
}

.discount {
    display: flex;
    align-items: center;

    .num {
        margin-left: 10px;
        color: #969696;
    }
}

:deep(.el-card__header) {
    padding: 0;
    background-color: #f9f9f9;
}

:deep(.el-card__body) {
    padding: 20px;
}

.header {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 40px;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    color: black;
}

.centent {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 60px;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    color: black;

    &:nth-child(even) {
        background-color: #f9f9f9;
    }

    &:hover {
        background-color: #f5f7fa;
    }

    .product_info {
        display: grid;
        grid-template-columns: 40px 1fr;
        grid-gap: 5px;
        align-items: center;

        .left_img {
            width: 40px;
            height: 40px;
        }

        .right_text {
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-gap: 7px;
            padding: 3px 0;

            .right_t {
                font-size: 14px;
            }

            .right_b {
                font-size: 12px;
                color: #969696;
            }
        }
    }
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    grid-gap: 15px 20px;
    padding-right: 20px;
    margin-bottom: 16px;
    line-height: 1;

    .groupchat {
        display: flex;
        align-items: center;
        position: relative;
        width: 200px;
        padding: 3px;
        border-radius: 2px;
        border: 1px solid #ffc69e;

        .groupchat_left {
            width: 36px;
            height: 36px;
            margin-right: 8px;
        }

        .groupchat_right {
            .groupchat_right_t {
                max-width: 170px;
                height: 20px;
                font-size: 14px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
            }

            .groupchat_right_b {
                font-size: 12px;
                color: #969696;
            }
        }

        .icon_box {
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #dfdfdf;
            font-size: 20px;
        }
    }
}

.group_box {
    display: flex;
    align-items: center;
    color: #969696;
    font-size: 14px;

    span {
        margin-left: 10px;
    }
}

.btn_box {
    position: absolute;
    bottom: 0;
    left: 20px;
    z-index: 99;
    height: 64px;
    width: calc(100% - 40px);
    box-sizing: border-box;
    padding-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 0 10px 0 rgb(212 212 212 / 50%);
    border-radius: 2px;

    // text-align: center;
}

.delete_btn {
    margin-bottom: -8px;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 24px;
    margin: 0 4px 8px;
    border: 1px solid #eaeaea;
    border-radius: 2px;
    text-align: center;
    background: #fff;
}

:deep(.el-table) {
    --el-table-row-hover-bg-color: #fffaf9;
}

// .productTable {
//   :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
//     background-color: #fffaf9 !important;
//   }
// }
</style>
